<nz-card class="main-card">
  <nz-table
    #basicTable
    nzSize="middle"
    [nzData]="models"
    [nzTotal]="totalCount"
    nzShowSizeChanger
    nzShowQuickJumper
    [nzFrontPagination]="false"
    [(nzPageIndex)]="currentPage"
    [(nzPageSize)]="maxResultCount"
    [nzPageSizeOptions]="[10, 15, 50, 100, 1000, 5000]"
    [nzShowTotal]="paginationTotalTemplate"
    [nzShowSizeChanger]="true"
    [nzScroll]="{ x: '100%', y: '100%' }"
  >
    <ng-template #paginationTotalTemplate let-total>
      <div style="flex: 1">
        <div *ngIf="selectedCount > 0">
          <span
            nz-icon
            [nzType]="'info-circle'"
            [nzTheme]="'fill'"
            style="font-size: 14px; color: #08c; margin-right: 5px;"
          ></span>
          <span [innerHTML]="'BasicArchives::UI:SimplyList.Pagging.SelectedTips' | abpLocalization : selectedCount"></span>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" nzGhost (click)="clearSelect()">{{ 'BasicArchives::UI:SimplyList.Pagging.SelectedTips.Buttons.Cancel' | abpLocalization }}</button>
          </nz-button-group>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" (click)="analyze()" [disabled]="isAnyOperationInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Analysis' | abpLocalization }}</button>
            <button nz-button nzType="primary" (click)="sync()" *ngIf="hasValidUnasyncCount() && !isSyncInProgress() && !isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Sync' | abpLocalization }}</button>
            <button nz-button nzDanger (click)="cancelSync()" *ngIf="isSyncInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.CancelSync' | abpLocalization }}</button>
            <button nz-button nzType="primary" (click)="update()" *ngIf="hasValidSyncedCount() && !isSyncInProgress() && !isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Update' | abpLocalization }}</button>
            <button nz-button nzDanger (click)="cancelUpdate()" *ngIf="isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.CancelUpdate' | abpLocalization }}</button>
          </nz-button-group>
        </div>
      </div>
      <div>{{ 'BasicArchives::UI:SimplyList.Pagging.PaggingTips' | abpLocalization : pageCount : total }}</div>
    </ng-template>
    <thead>
      <tr>
        <th
          nzWidth="60px"
          [nzLeft]="true"
          [nzChecked]="isAllSelected"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="targetAllSelect()"
        ></th>
        <ng-container>
          <th nzWidth="300px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Name' | abpLocalization }}</th>
          <th nzWidth="150px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.U9Count' | abpLocalization }}</th>
          <th nzWidth="150px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.SyncCount' | abpLocalization }}</th>
          <th nzWidth="150px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.UnasyncCount' | abpLocalization }}</th>
          <th nzWidth="150px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Count' | abpLocalization }}</th>
          <th nzWidth="500px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Progress' | abpLocalization }}</th>          
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let model of basicTable.data; trackBy: track.by('id')"
        (click)="targetModelSelect(model)"
      >
        <td
          [nzLeft]="true"
          [nzChecked]="isModelSelected(model)"
          (nzCheckedChange)="targetModelSelect(model)"
        ></td>
        
        <ng-container>
          <td> {{ 'BasicArchives::ModelTitle:' + model.id | abpLocalization }} </td>
          <td> 
            <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
            <span *ngIf="!isModelAnalyzing(model.id)">{{ model.u9Count }}</span>
          </td>
          <td> 
            <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
            <span *ngIf="!isModelAnalyzing(model.id)">{{ model.asyncCount }}</span>
          </td>
          <td> 
            <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
            <span *ngIf="!isModelAnalyzing(model.id)">{{ model.unasyncCount }}</span>
          </td>
          <td> 
            <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
            <span *ngIf="!isModelAnalyzing(model.id)">{{ model.count }}</span>
          </td>
          <td> 
            <div *ngIf="isModelSync(model.id) || isModelUpdating(model.id)">
              <nz-progress 
                [nzPercent]="getModelProgress(model.id).percentage" 
                [nzShowInfo]="true"
                [nzFormat]="progressFormat"
                nzSize="small"
                [nzStatus]="isModelUpdating(model.id) ? 'active' : 'normal'">
              </nz-progress>
            </div>
            <div *ngIf="!isModelSync(model.id) && !isModelUpdating(model.id) && getModelProgress(model.id).total > 0">
              <nz-progress 
                [nzPercent]="getModelProgress(model.id).percentage" 
                [nzShowInfo]="true"
                [nzFormat]="progressFormat"
                nzSize="small"
                nzStatus="success">
              </nz-progress>
            </div>
          </td>          
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</nz-card>